<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <script src="/js/haha.js"></script>

    <style>
        .el-input {
            display: inline-block;
            width: 200px;
        }

        .el-pagination {
            padding-top: 20px;
            text-align: center;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 搜索过滤区域 -->
        <div style="margin-bottom: 20px;">
            <el-input v-model="queryInfo.name" placeholder="请输入姓名"></el-input>
            <el-input v-model.number="queryInfo.minAge" placeholder="请输入最小年龄"></el-input>
            <el-input v-model.number="queryInfo.maxAge" placeholder="请输入最大年龄"></el-input>
            <!-- 操作按钮 -->
            <el-button icon="el-icon-search" @click="searchData()" circle></el-button>
            <!--        <el-button icon="el-icon-search" circle></el-button>-->
            <!--        <el-button icon="el-icon-search" circle></el-button>-->
            <el-button type="success" icon="el-icon-plus" circle @click="openAddStu()"></el-button>
        </div>
        <!-- 表格展示 -->
        <el-table :data="tableData">
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="grade.gname" label="班级">
            </el-table-column>
            <el-table-column label="头像">
                <template slot-scope="scope">
                    <img v-bind:src="scope.row.headImg" width="30" height="40" alt="" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteStu(scope.row.id)"></el-button>
                    <el-button type="primary" icon="el-icon-edit" circle
                        @click="openUpdateStu(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[5,10,15,20]" :page-size="5" layout="total,sizes,prev,pager,next,jumper" :total="total">
        </el-pagination>

        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form ref="stuInfo" :model="stuInfo" :rules="rules">
                <el-form-item label="学生姓名" prop="name">
                    <el-input autocomplete="off" v-model="stuInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" prop="age">
                    <el-input autocomplete="off" v-model="stuInfo.age"></el-input>
                </el-form-item>
                <el-form-item label="学生地址" prop="address">
                    <el-input autocomplete="off" v-model="stuInfo.address"></el-input>
                </el-form-item>
                <el-form-item label="学生班级" prop="gid">
                    <el-select placeholder="请选择班级" v-model="stuInfo.gid">
                        <el-option v-for="g in gradeArr" :label="g.gname" :value="g.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="头像" prop="headImg">
                    <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/ssm/stu/upload"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="stuInfo.headImg" :src="stuInfo.headImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addStudent()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                title: "",
                stuInfo: {},
                dialogFormVisible: false,
                queryInfo: {},
                tableData: [],
                gradeArr: [],
                size: 5,
                total: 5,
                rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },

                    ],
                    age: [
                        { required: true, message: '请输入年龄', trigger: 'blur' },

                    ],
                    address: [
                        { required: true, message: '请输入地址', trigger: 'blur' },

                    ],
                    gid: [
                        { required: true, message: '请选择班级', trigger: 'blur' },

                    ]
                }
            },
            methods: {
                handleAvatarSuccess(res, file) {
                    this.stuInfo.headImg = res.data;
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                openUpdateStu(id) {
                    $.get(BASE_URL + "/grade", function (backData) {
                        app.gradeArr = backData.data;
                        $.get(BASE_URL + "/stu/get/" + id, function (backData) {
                            app.stuInfo = backData.data;
                            app.title = "修改学生"
                            app.dialogFormVisible = true;
                        });
                    })
                },
                addStudent() {
                    this.$refs["stuInfo"].validate((valid) => {
                        if (valid) {
                            var path = app.title === "添加学生" ? BASE_URL + "/stu/add" : BASE_URL + "/stu";
                            var method = app.title === "添加学生" ? "POST" : "PUT";

                            $.ajax({
                                url: path,
                                type: method,
                                data: app.stuInfo,
                                success: function (backData) {
                                    if (backData.code === 200) {
                                        app.$message({
                                            type: 'success',
                                            message: '操作成功！'
                                        });
                                        window.location.reload();
                                    } else {
                                        app.$message({
                                            type: 'danger',
                                            message: '操作失败！'
                                        });
                                    }
                                },
                                error: function () {
                                    app.$message({
                                        type: 'danger',
                                        message: '请求发生错误！'
                                    });
                                }
                            });
                        }
                    });
                },
                openAddStu() {
                    //请求班级数据
                    $.get(BASE_URL + "/grade", function (backData) {
                        app.gradeArr = backData.data;
                        app.stuInfo = {
                            id: "",
                            name: "",
                            age: "",
                            address: "",
                            gid: ""
                        };
                        app.title = "添加学生"
                        app.dialogFormVisible = true;
                    })
                },
                deleteStu(id) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.delete(BASE_URL + "/stu/delete?" + id, function (backData) {
                            if (backData.code == 200) {
                                app.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                window.location.reload();
                            } else {
                                app.$message({
                                    type: 'danger',
                                    message: '删除失败!'
                                });
                            }
                        });

                    });
                },
                handleSizeChange(val) {
                    getStudentData(1, val);
                },
                handleCurrentChange(val) {
                    getStudentData(val, app.size);
                },
                searchData() {
                    getStudentData(1, 5);
                }

            }
        });
        function getStudentData(a, b) {
            app.queryInfo.pageNo = a;
            app.queryInfo.pageCount = b;
            $.post(BASE_URL + "/stu/query", app.queryInfo, function (backData) {
                app.tableData = backData.data.currentData;
                app.total = backData.data.totalCount;
            })
        }
        getStudentData(1, 5);
    </script>

</body>

</html>